<template>
    <el-form ref="passwordForm" :model="passwordForm" :rules="passwordRules" label-width="100px" class="password-form">
        <el-form-item label="当前密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入当前密码" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" show-password />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" show-password />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="loading" @click="submitPassword">修改密码</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
        <div class="password-tips">
            <i class="el-icon-info"></i>
            密码要求：
            <ul>
                <li>长度不少于8位</li>
                <li>必须包含大写字母、小写字母、数字和特殊字符</li>
                <li>不能与最近3次使用过的密码相同</li>
            </ul>
        </div>
    </el-form>
</template>

<script>
export default {
    props: {
        user: {
            type: Object,
            required: true
        }
    },
    data() {
        // 确认密码的验证函数
        const validateConfirmPassword = (rule, value, callback) => {
            if (value !== this.passwordForm.newPassword) {
                callback(new Error('两次输入的密码不一致!'));
            } else {
                callback();
            }
        };

        // 密码强度验证函数
        const validatePasswordStrength = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入密码'));
            } else if (value.length < 8) {
                callback(new Error('密码长度不能小于8位'));
            } else {
                const hasUpperCase = /[A-Z]/.test(value);
                const hasLowerCase = /[a-z]/.test(value);
                const hasNumber = /[0-9]/.test(value);
                const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);

                if (!(hasUpperCase && hasLowerCase && hasNumber && hasSpecial)) {
                    callback(new Error('密码必须包含大写字母、小写字母、数字和特殊字符'));
                } else {
                    callback();
                }
            }
        };

        return {
            loading: false,
            passwordForm: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: ''
            },
            passwordRules: {
                oldPassword: [
                    { required: true, message: '请输入当前密码', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { validator: validatePasswordStrength, trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { validator: validateConfirmPassword, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitPassword() {
            this.$refs.passwordForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    // 实际项目中这里应该调用修改密码的API
                    setTimeout(() => {
                        this.$message.success('密码修改成功，下次登录请使用新密码');
                        this.resetForm();
                        this.loading = false;
                    }, 600);
                } else {
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.passwordForm.resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.password-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 0;

    .password-tips {
        margin-top: 20px;
        padding: 10px 15px;
        background: #f8f8f8;
        border-left: 4px solid #409eff;
        color: #606266;
        font-size: 14px;

        i {
            color: #409eff;
            margin-right: 5px;
        }

        ul {
            margin: 5px 0 0 20px;
            padding: 0;

            li {
                line-height: 1.8;
            }
        }
    }
}
</style>